<template>
    <h1>我是 APP 组件 --- {{ this.msg2 }}</h1>

    <!--
        祖孙级通信
            1. 在 祖先级组件中 利用 provide 向所有的后代组件暴露一些数据
                可以是普通字符串, 也可以是 data 中的数据, 也可以是 methods 中的方法
            2. 在 需要接受数据的组件, 利用 inject 接收到 祖先级组件暴露的数据
     -->
    <child1 />
</template>

<script>
import child1 from "./components/child1.vue";
export default {
    data() {
        return {
            msg2: "在 data 中的普通字符串",
        };
    },
    /**
     *  在 祖先组件中 有一个 属性 provide 他的值是一个函数
     *  函数内部需要返回一个对象
     *
     *  对象内部的数据, 会暴露给当前组件的所有子孙级组件
     */
    provide() {
        return {
            msg1: "一个普通的字符串",
            msg2: this.msg2,
            setMsg2: this.setMsg2,
        };
    },
    methods: {
        setMsg2(newMsg) {
            this.msg2 = newMsg;
        },
    },
    components: {
        child1,
    },
};
</script>

<style></style>
